<!DOCTYPE html>
 <html lang="en" xmlns:th="http://www.thymeleaf.org">
   <head>
    <meta charset="UTF-8"/>
    <title>商品信息查询</title>
    <link rel="stylesheet" th:href="@{/css/bootstrap.css}"  href="../../static/css/bootstrap.css"/>
       <script src="../../static/js/jquery-3.3.1.min.js" th:src="@{/js/jquery-3.3.1.min.js}"></script>
       <script src="../../static/js/sockjs.min.js" th:src="@{/js/sockjs.min.js}"></script>
       <script src="../../static/js/stomp.min.js" th:src="@{/js/stomp.min.js}"></script>
   </head>
 <body class="container" onload="disConnect()">
<br/>
 <h1>商品列表</h1>
 <br/><br/>
 <div class="with:80%">
         <table class="table table-hover">
             <thead>
         <tr>
                 <th>#</th>
                 <th>produce Number</th>
                 <th>produce Name</th>
                 <th>price</th>
                 <th>number</th>
                 <th>Edit</th>
                 <th>Delete</th>
             </tr>
         </thead>
             <tbody>
         <tr  th:each="produce : ${produces}">
                 <th scope="row" th:text="${produce.id}"></th>
                 <td th:text="${produce.proNumber}"></td>
                 <td th:text="${produce.proName}"></td>
                 <td th:text="${produce.price}"></td>
                   <td th:text="${produce.number}"></td>
                 <td><a th:href="@{/toEdit(id=${produce.id})}">edit</a></td>
                 <td><a th:href="@{/delete(id=${produce.id})}">delete</a></td>
             </tr>
        </tbody>
         </table>
     </div>
 <div class="form-group">
         <div class="col-sm-2 control-label">
             <a href="/toAdd" th:href="@{/toAdd}" class="btn btn-info">add</a>
         </div>
     </div>

<div>
    <div>
        <button id="connect" onclick="connect();">连接</button>
        <button id="disconnect" disabled="disabled" onclick="disConnect();">断开连接</button>
    </div>
    <div id="conversationDiv">
        <button  onclick="send();">发送</button>
        <button id="sendName" onclick="sendToUser();">发送给指定用户</button>
        <p id="response"></p>
        <p id="response1"></p>
    </div>
</div>
 </body>

   <script type="text/javascript">
       var stompClient = null;
       //指定的用户订阅

       /*发送条件*/
       function setConnected(connected) {
           document.getElementById('connect').disabled = connected;
           document.getElementById('disconnect').disabled = !connected;
           document.getElementById('conversationDiv').style.visibility = connected ? 'visible' : 'hidden';
           $('#response').html();
           $('#response1').html();
       }

       /*打开连接*/
       function connect() {
           //1.连接SockJS的endpoint是“endpointWisely”，与后台代码中注册的endpoint要一样。
           var socket = new SockJS("/portfolio-stomp");
           //2.创建STOMP协议的webSocket客户端。
           stompClient = Stomp.over(socket);
           //3.连接webSocket的服务端。
           stompClient.connect({},function (frame) {
               setConnected(true);
               console.log("开始进行连接Cennected:"+frame);
               //4.通过stompClient.subscribe（）订阅服务器的目标是'/topic/getResponse'发送过来的地址，与@SendTo中的地址对应。
               stompClient.subscribe("/topic/greetings2",function (respnose) {
                   console.log(respnose);
                   showResponse(respnose.body);
               });

               //4,通过stompClient.subscribe（）订阅服务器的目标是'/user/' + userId + '/msg'接收一对一的推送消息,其中userId由服务端传递过来,用于表示唯一的用户,通过此值将消息精确推送给一个用户
               stompClient.subscribe('/user/topic/greetings1', function(respnose){
                   console.log(respnose);
                   showResponse1(respnose.body);
               });
           });
       }

       /*
        * 关闭 连接
        */
       function disConnect() {
           if(stompClient != null){
               stompClient.disconnect();
           }
           setConnected(false);
           console.log("已经关闭了webSocket");
       }
       /*所有人发送消息*/
       function send() {
           //通过stompClient.send（）向地址为"/welcome"的服务器地址发起请求，与@MessageMapping里的地址对应。因为我们配置了registry.setApplicationDestinationPrefixes(Constant.WEBSOCKETPATHPERFIX);所以需要增加前缀/ws-push/
           stompClient.send("/app/handle2", {}, "你好服务端,我是广播所有用户");
       }

       function sendToUser(){
           stompClient.send("/app/handle1",{},"你好服务端，我是指定的用户");
       }

       function showResponse(message) {
           var response = $("#response");
           response.html(message);
       }

       function showResponse1(message) {
           var response = $("#response1");
           response.html(message);
       }
   </script>
 </html>

